<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="filters['startDate']"
        type="date"
        placeholder="选择开始日期">
      </el-date-picker>
      <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="filters['endDate']"
        type="date"
        placeholder="选择结束日期">
      </el-date-picker>
      <el-button class="filter-item" size="small"  type="primary" v-waves icon="el-icon-search" @click="loadData">搜索</el-button>
    </div>
    <div class="table">
      <div>平均会员订单金额</div>
      <table v-loading="listLoading">
          <thead>
            <tr>
              <td width="200">订单总金额（微信+积分，不含退款）</td>
              <td width="200">当前总会员数</td>
              <td width="200">平均每位会员订单金额</td>
            </tr>
          </thead>
            <tr>
              <td width="200">{{formData.totalOrderAmount}}</td>
              <td width="200">{{formData.totalUserNum}}</td>
              <td width="200">￥ {{formData.avgUserOrderAmount}}</td>
            </tr>
          <tbody>
          </tbody>
      </table>
      <div class="title">平均会员订单量</div>
      <table v-loading="listLoading">
          <thead>
            <tr>
              <td width="200">总订单数（不含退款）</td>
              <td width="200">当前总会员数</td>
              <td width="200">平均会员订单量</td>
            </tr>
          </thead>
            <tr>
              <td width="200">{{formData.totalOrderNum}}</td>
              <td width="200">{{formData.totalUserNum}}</td>
              <td width="200">{{formData.avgUserOrderNum}}</td>
            </tr>
          <tbody>
          </tbody>
      </table>
      <div class="title">注册会员购买率</div>
      <table v-loading="listLoading">
          <thead>
            <tr>
              <td width="200">有过订单的会员（已支付）</td>
              <td width="200">当前总会员数</td>
              <td width="200">注册会员购买率</td>
            </tr>
          </thead>
            <tr>
              <td width="200">{{formData.hasOrderUserNum}}</td>
              <td width="200">{{formData.totalUserNum}}</td>
              <td width="200">{{formData.valuableUserRate}}%</td>
            </tr>
          <tbody>
          </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import baseMixin from "../../mixins/baseMixin";
export default {
  data() {
    return {
      formData: {
        totalOrderAmount: 0,
        totalOrderNum: 0,
        totalUserNum: 0,
        avgUserOrderAmount: 0,
        hasOrderUserNum: 0,
        valuableUserRate: 0,
        avgUserOrderNum: 0
      }
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.listLoading = true;
      let startDate = this.filters['startDate'];
      let endDate = this.filters['endDate'];
      this.$get("/admin/business_report/sale_indicator", {
        startDate: startDate,
        endDate: endDate
      }).then(data => {
        this.listLoading = false;
        this.formData = data;
      })
      .catch(_ => {
        this.listLoading = false;
      });
    }
  }
};
</script>

<style>
.title {
  margin-top: 20px;
}

.table table {
  margin-top: 20px;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.table thead {
  border: 1px solid #eee;
  background-color: #999;
  color: #fff;
}

.table td {
  padding: 15px 0;
  border: 1px solid #eee;
}
</style>
